/* eslint-disable jsx-a11y/alt-text */
import React from "react";
import { Button } from "antd-mobile";
import "./index.less";
import TabBar from "@/components/hjTabBar.jsx";
import { http } from "@/utils/request/index.js";
import api from "@/utils/api.js";
import storage from "@/utils/storage.js";
import Status from "@/components/status";
import { getQueryString } from "@/utils/utils.js";
import { withRouter } from "react-router-dom";
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [], // 任务列表
      links: [
        {
          imgSrc: require("../../images/index/img1.png"),
          name: "劳务分包",
        },
        {
          imgSrc: require("../../images/index/img2.png"),
          name: "收入结算",
        },
        {
          imgSrc: require("../../images/index/img3.png"),
          name: "预支薪资",
        },
        {
          imgSrc: require("../../images/index/img4.png"),
          name: "安全保障",
        },
      ],
      signStatus: "01",
      order: {
      },
    };
  }

  componentWillMount() {
    let openId = storage.get("openId");
    if (openId) {
      let userInfo = storage.get("userInfo") || {};
      let signStatus = userInfo.signStatus;
      this.setState({
        signStatus,
      });
      this.getPageMessageByOpenId();
      return;
    }
    let code = getQueryString("code");
    // 获取 userinfo
    http
      .post(api.getOpenId, {
        code: code || 1,
      })
      .then((res) => {
        let { openId, signStatus } = res.data;
        storage.set("userInfo", res.data);
        storage.set("openId", openId);
        this.setState({
          signStatus,
        });
        this.getPageMessageByOpenId();
      });
  }
  getPageMessageByOpenId = () => {
    // 获取个人信息
    http.post(api.getStaffItemByOpenId).then((res) => {
      let { idCard, name, idPicPre, idPicBak } = res.data;
      let userInfo = storage.get("userInfo") || {};
      userInfo = {
        ...userInfo,
        idCard,
        name,
        idPicPre,
        idPicBak,
      };
      storage.set("userInfo", userInfo);
      this.setState({
        ...res.data,
      });
    });

    //获取任务列表
    http.post(api.getTaskForWeixin).then((res) => {
      this.setState({
        tasks: res.data,
      });
    });
  };
  render() {
    let { order, advanceFlag, loanFlag, tasks } = this.state;
    return (
      <div className="home">
        <div className="content">
          <div className="banner">
            <img src={require("../../images/index/banner.png")} />
          </div>
          {this.state.signStatus == "01" || this.state.signStatus == "10" ? (
            <div className="cert">
              <img />
              <div className="certOp mt-15">
                <p className="ft-22 col-fff">立即去认证</p>
                <p className="col-fff">[需要实名认证才能享受服务]</p>
                <p
                  className="certBtn"
                  onClick={() => {
                    this.props.history.push("verify");
                  }}
                >
                  去认证
                </p>
              </div>
            </div>
          ) : (
              ""
            )}
          {this.state.signStatus == "01" || this.state.signStatus == "10" ? (
            <div className="about mt-15">
              <p className="ft-18 ft-bold pdb-10">关于绘极云付</p>
              <p>
                绘极云付依托光大银行专线自主研发的综合服务平台，向全国范围内共享经济平台企业和个体经营者提供劳动服务分包、收入结算、薪资预支等综合服务。
              </p>
              <div className="link flex flex-between ">
                {this.state.links.map((item, index) => {
                  return (
                    <div key={index}>
                      <img className="image" src={item.imgSrc} />
                      <p>{item.name}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          ) : (
              ""
            )}
          {this.state.signStatus != "01" && this.state.signStatus != "10" ? (
            <div
              className="bgc-fff mt-15"
              style={{ padding: "0 0.5rem 0.5rem" }}
            >
              <p
                className="ft-18 ft-bold border-bottom-d9"
                style={{ lineHeight: 2, marginBottom: "0.2rem" }}
              >
                进行中的任务
              </p>
              {tasks.length ? (
                <div
                  className="flex flex-column"
                  onClick={() => {
                    this.props.history.push(`taskDetail?id=${tasks[0].id}`);
                  }}
                >
                  <div className="flex flex-between">
                    <div className="ft-17 col-262626 ft-bold">
                      {tasks[0].task.name}
                    </div>
                    <div className="ft-13">
                      <span className="ft-17 col-FF8A72">
                        {tasks[0].amount}
                      </span>
                      元
                    </div>
                  </div>
                  <p className="col-8C8C8C ellipsis">
                    {tasks[0].task.content}{" "}
                  </p>
                  <div className="flex flex-between mt-10">
                    <div className="col-595959">
                      {tasks[0].merchant.merName}
                    </div>
                    <div className="col-8C8C8C">
                      {tasks[0].merchant.createDate}
                    </div>
                  </div>
                </div>
              ) : (
                  <div className=" text-center">
                    <img
                      style={{ width: "50%" }}
                      src={require("../../images/notask.png")}
                    />
                  </div>
                )}
            </div>
          ) : (
              ""
            )}
          {this.state.signStatus != "01" && this.state.signStatus != "10"? (
            <div
              className="bgc-fff mt-15"
              style={{ padding: "0 0.5rem 0.5rem" }}
            >
              <p
                className="ft-18 ft-bold border-bottom-d9"
                style={{ lineHeight: 2, marginBottom: "0.2rem" }}
              >
                薪资预支
              </p>
              <Status
                advanceFlag={advanceFlag}
                loanFlag={loanFlag}
                order={order}
              />
              <p
                className="col-595959 border-bottom-d9"
                style={{ lineHeight: 2, padding: "0.2rem 0" }}
              >
                总额度{order.limitAmount}元，利率低至{order.fee}
              </p>
              <p
                className="col-262626 ft-15 text-center"
                style={{ padding: "0.4rem 0" }}
              >
                简单四步完成预支
              </p>
              <img src={require('../../images/index/advance.png')} />
            </div>
          ) : (
              ""
            )}
        </div>
        <TabBar selectedTab="index"></TabBar>
      </div>
    );
  }
}

export default withRouter(Home);
